<template>
  <div class="app-container" >

    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 1px 0  25px 0">

      <p style="border-bottom:1px solid #E8E8E8  ;padding-bottom:20px">&nbsp;&nbsp;&nbsp;&nbsp;录入快递</p>
      <el-form label-width="120px">
        <el-form-item label="单号 ">
          <el-input v-model="express.number" />
        </el-form-item>

        <el-form-item label="快递公司">
          <el-select v-model="express.company" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="收件人姓名">
          <el-input v-model="express.username"/>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="express.userphone"/>
        </el-form-item>

        <el-form-item>
          <el-button :disabled="saveBtnDisabled" type="primary" @click="add">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
import express from '@/api/e/express/express'
export default {
  data() {
    return {
      express: {
        username: '',
        userphone: '',
        company: '',
        number: ''

      },
      saveBtnDisabled: false, // 保存按钮是否禁用,
      options: [{
        value: '京东快递',
        label: '京东快递'
      }, {
        value: '阿联酋邮政',
        label: '阿联酋邮政'
      }, {
        value: '中通快递',
        label: '中通快递'
      }, {
        value: '圆通速递',
        label: '圆通速递'
      }, {
        value: '天天快递',
        label: '天天快递'
      },
      {
        value: '中铁物流',
        label: '中铁物流'
      },
      {
        value: '邮政国际包裹',
        label: '邮政国际包裹'
      },
      {
        value: '申通快递',
        label: '申通快递'
      },
      {
        value: '越丰物流',
        label: '越丰物流'
      },
      {
        value: '顺丰快递',
        label: '顺丰快递'
      },
      {
        value: '巴西邮政',
        label: '巴西邮政'
      },
      {
        value: '澳大利亚邮政',
        label: '澳大利亚邮政'
      },
      {
        value: '阿根廷邮政',
        label: '阿根廷邮政'
      },
      {
        value: 'EMS经济快递',
        label: 'EMS经济快递'
      }],
      value: ''
    }
  },
  created() {

  },
  methods: {
    saveOrUpdate() {
      // 判断是修改还是添加
      // 根据teacher是否有id
      this.saveBtnDisabled = true
      if (!this.express.id) {
        this.add()
      } else {
        this.updateUser()
      }
    },
    // 保存
    add() {
      if (this.express.username === '' || this.express.userphone === '' || this.express.company === '' || this.express.number === '') {
        this.$message({
          type: 'success',
          message: '请完善信息!'
        })
        return false
      }
      this.saveBtnDisabled = true
      express.add(this.express).then(response => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        // 重新查询数据，路由跳转
        this.$router.push({ path: '/e/express/list' })
      })
    }
  }

}
</script>
